<template>
  <view v-if="imgSrc" class="goods-no-sale">
    <view class="no-sale-bg"></view>
    <view class="no-sale-body">
      <image
        :style="{ height: imgHeight, width: imgWidth }"
        :src="imgSrc"
        :mode="imgMode"
      />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    goodsInfo: {
      type: Object,
      default: {},
    },
    imgHeight: {
      type: String,
      default: "",
    },
    imgWidth: {
      type: String,
      default: "",
    },
    imgMode: {
      type: String,
      default: "heightFix",
    },
  },
  watch: {},
  data() {
    return {};
  },
  created() {
    uni.getSystemInfo({
      success: (res) => {
        this.systemInfo = res;
      },
    });
  },
  computed: {
    imgSrc() {
      // 下架
      if (this.goodsInfo.status <= 0) {
        return this.asyncImgs.diyNew.goods_out_line;
      }
      if (this.goodsInfo.use_attr == 1 && (this.goodsInfo.product_type == 0 || this.goodsInfo.product_type == 4)) {
        let goodsInfo = JSON.parse(JSON.stringify(this.goodsInfo));
        if (typeof goodsInfo.attr == "string") {
          goodsInfo.attr = JSON.parse(goodsInfo.attr);
        }
        if (goodsInfo.product_type == 2 || goodsInfo.product_type == 1) {
          return "";
        }
        let flag = goodsInfo.attr.every((d) => {
          return d.num <= 0;
        });
        if (flag) return this.asyncImgs.diyNew.goods_no_rest;
      } else {
        if (
          (this.goodsInfo.goods_num <= 0 || this.goodsInfo.max_num <= 0) &&
          this.goodsInfo.product_type != 1 &&
          this.goodsInfo.product_type != 2
        )
          return this.asyncImgs.diyNew.goods_no_rest;
      }
      return "";
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.goods-no-sale {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 11;
  .no-sale-bg {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.5;
  }
  .no-sale-body {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      height: 70%;
    }
  }
}
</style>
